<template>
    <div class="circle_box">
        <div class="circle">
            <div class="circle_title">
                <h6>浏览时间段</h6>
                <el-button :disabled="!chartData.browse.length" @click="export2Img(myRef_one, '浏览时间段')">
                    导出
                </el-button>
            </div>
            <div class="circle_main">
                <div v-if="chartData.browse.length" ref="myRef_one" class="bread_box"></div>
                <div v-else class="bread_box_none">
                    <div class="none_data">
                        <img class="no_img" src="@/assets/noData.png" alt="" />
                        <div>暂无数据</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="circle">
            <div class="circle_title">
                <h6>客户标签</h6>
                <el-button :disabled="!chartData.boardTag.length" @click="export2Img(myRef_two, '客户标签')">
                    导出
                </el-button>
            </div>
            <div class="circle_main">
                <div v-if="chartData.boardTag.length" ref="myRef_two" class="bread_box"></div>
                <div v-else class="bread_box_none">
                    <div class="none_data">
                        <img class="no_img" src="@/assets/noData.png" alt="" />
                        <div>暂无数据</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="statistics_box">
        <div class="title">
            <h6>浏览趋势</h6>
        </div>
        <div class="statistics_main">
            <div class="btn_box">
                <el-radio-group v-model="pageType" @change="onChangeEchar">
                    <el-radio-button :label="1">浏览人数</el-radio-button>
                    <el-radio-button :label="2">浏览次数</el-radio-button>
                    <el-radio-button v-if="!isExternalLink" :label="3">浏览时长</el-radio-button>
                    <el-radio-button :label="4">员工分享人数</el-radio-button>
                    <el-radio-button v-if="!isExternalLink" :label="5">客户分享人数</el-radio-button>
                </el-radio-group>
                <el-button v-if="chartData.line.date.length" @click="export2Img(myChartLineRef, onTooltip(pageType))">
                    导出
                </el-button>
            </div>
            <div v-if="chartData.line.date.length" id="echarts" ref="myChartLineRef"></div>
            <div v-else class="none_data">
                <img class="no_img" src="@/assets/noData.png" alt="" />
                <div>暂无数据</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, inject, defineExpose, nextTick, onMounted, defineEmits, reactive } from 'vue';
import { export2Img, SFormat } from '@/utils/utils';
const emit = defineEmits(['submit']);
const chartData: any = ref({
    line: {
        date: [],
        data: []
    },
    browse: [], // 时长占比
    boardTag: [] // 标签占比
});
const echarts: any = inject('ec');
const pageType = ref(1);
const myChartLineRef = ref(null);
const myRef_one = ref();
const myRef_two = ref();

const tabs = reactive<Array<any>>([
    {
        label: '1',
        title: '浏览人数'
    },
    {
        label: '2',
        title: '浏览次数'
    },
    {
        label: '3',
        title: '浏览时长'
    },
    {
        label: '4',
        title: '员工分享人数'
    },
    {
        label: '5',
        title: '客户分享人数'
    }
]);

const props = withDefaults(
    defineProps<{
        isExternalLink: boolean;
    }>(),
    {
        isExternalLink: false
    }
);

const onTooltip = (type: any): string => {
    const title = tabs.find(item => item.label == pageType.value).title;
    return title;
    // let res = ''
    // switch (type) {
    //   case 1:
    //     res = '浏览人数'
    //     break
    //   case 2:
    //     res = '浏览次数'
    //     break
    //   case 3:
    //     res = '浏览时长'
    //     break
    // }
    // return res
};
// 折线图
const getEchartsLine = () => {
    const myChartLine = echarts?.init(myChartLineRef.value);
    const option = {
        color: ['#fa6c00'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#FF6B00'
                }
            }
        },
        grid: {
            top: 20,
            bottom: 10,
            left: 32,
            right: 40,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: chartData.value.line.date,
            boundaryGap: false,
            // axisTick: {
            //   show: false,
            //   alignWithLabel: true
            // },
            offset: 3
        },
        yAxis: {
            type: 'value',
            name: pageType.value == 3 ? '秒' : pageType.value == 2 ? '次' : '人',
            nameGap: 10, // y轴name与横纵坐标轴线的间距
            nameTextStyle: {
                padding: [0, 35, 10, 0] // 加上padding可以调整其位置
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#969696'
            },
            splitLine: {
                lineStyle: {
                    type: 'line',
                    color: '#e8e8e8' // 分割线颜色
                }
            }
        },
        series: [
            {
                name: onTooltip(pageType.value),
                type: 'line',
                data: chartData.value.line.data,
                symbol: 'circle',
                symbolSize: 0,
                smooth: true,
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(247, 222, 211)' },
                            { offset: 0.5, color: 'rgba(251, 230, 223)' },
                            { offset: 1, color: 'rgba(255, 255, 255)' }
                        ])
                    }
                },
                itemStyle: {
                    normal: {
                        borderWidth: 2,
                        color: '#FF9D23'
                    }
                },
                emphasis: {
                    // 鼠标 hover 时的样式
                    itemStyle: {
                        color: '#FF9D23', // hover 圆点颜色
                        borderColor: '#FF9D23', // hover 圆点边框颜色
                        borderWidth: 8
                    }
                }
            }
        ]
    };
    myChartLine.setOption(option);
    nextTick(() => {
        myChartLine.resize();
    });
    window.onresize = function () {
        myChartLine.resize();
    };
};
// 饼状图
const getEchartOne = () => {
    const myChart_one = echarts.init(myRef_one.value);
    myChart_one.setOption({
        tooltip: {
            trigger: 'item',
            formatter: function (a: any) {
                return `${a.name}：${SFormat(a.data.value)}`;
            }
        },
        series: [
            {
                name: '浏览时间段',
                type: 'pie',
                data: chartData.value.browse,
                label: {
                    normal: {
                        show: true,
                        formatter: '{b} {d}%' //自定义显示格式(b:name, c:value, d:百分比)
                    }
                },
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: (params: any) => {
                                if (params.data.name !== '') {
                                    return (
                                        `${params.data.name}` +
                                        ` : ${params.data.value === undefined ? 0 : params.data.value}%`
                                    );
                                }
                            } //处理如果后端返回value返回都是0的时候，显示undefined
                        },
                        labelLine: { show: true }
                    }
                },
                color: ['#B50000', '#FF0000', '#FF8364', '#FFB988', '#FDE860', '#FFBE49'],
                radius: '50%'
            }
        ]
    });
    nextTick(() => {
        myChart_one.resize();
    });
    window.onresize = function () {
        myChart_one.resize();
    };
};
const getEchartTwo = () => {
    const myChart_two = echarts.init(myRef_two.value);
    myChart_two.setOption({
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                name: '客户标签',
                type: 'pie',
                radius: '50%',
                data: chartData.value.boardTag,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: '{b} : {d}%'
                        },
                        labelLine: { show: true }
                    }
                },
                color: ['#DF2E6B', '#29A9F5', '#2396F2', '#3F51B5', '#673AB8', '#9C28B1']
            }
        ]
    });
    nextTick(() => {
        myChart_two.resize();
    });
    window.onresize = function () {
        myChart_two.resize();
    };
};
// 更新折线图数据
const onChangeEchar = (val: any) => {
    emit('submit', val);
};
const onUpdateLine = (v: any) => {
    const date: any = [];
    const data: any = [];
    v.forEach((item: any) => {
        date.push(item.time);
        data.push(item.data);
    });
    chartData.value.line.date = date;
    chartData.value.line.data = data;
    nextTick(() => {
        chartData.value.line.date.length && getEchartsLine();
    });
};
const getEchartData = (val: any) => {
    // 饼状图数据处理
    const browse: any = [];
    const boardTag: any = [];
    val[0].forEach((item: any) => browse.push({ name: item.type, value: Number(item.value) }));
    val[1].forEach((item: any) => boardTag.push({ name: item.type, value: item.value }));
    chartData.value.browse = browse;
    chartData.value.boardTag = boardTag;
    // 折线图数据处理
    const date: any = [];
    const data: any = [];
    val[2].forEach((item: any) => {
        date.push(item.time);
        data.push(item.data);
    });
    chartData.value.line.date = date;
    chartData.value.line.data = data;
    nextTick(() => {
        chartData.value.browse.length && getEchartOne();
        chartData.value.boardTag.length && getEchartTwo();
        chartData.value.line.date.length && getEchartsLine();
    });
};
defineExpose({
    getEchartData,
    onUpdateLine
});
</script>

<style lang="scss" scoped>
.statistics_box {
    margin-bottom: 16px;
    background: #fff;
    border: 1px solid #eaeaea;
    font-size: 14px;
    color: #33302d;

    .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 56px;
        padding: 0 24px;
        border-bottom: 1px solid #eaeaea;
    }

    .statistics_main {
        padding: 0 24px 24px;
    }

    .btn_box {
        display: flex;
        justify-content: space-between;
        padding: 16px 0;
    }

    #echarts {
        display: flex;
        justify-content: center;
        height: 320px;
    }
}

.circle_box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 16px;
    margin-bottom: 16px;

    .circle {
        box-sizing: border-box;
        background: #fff;
        border: 1px solid #eaeaea;

        .circle_title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 24px;
            border-bottom: 1px solid #eaeaea;
        }

        .circle_main {
            padding: 24px;
            display: flex;
            justify-self: center;
            align-self: center;
        }

        .circle_content {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .bread_box {
            display: flex;
            justify-content: center;
            width: 100%;
            height: 400px;
        }

        .bread_box_none {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 400px;
        }
    }
}

.none_data {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #909399;

    img {
        transform: translateX(15%);
    }
}
</style>
